<template>
	<view class="page">
		<view class="box_1">
			<view class="block_1">
				<view class="nav-bar_1">
					<nav-bar :title="das" :color="navBarColor" :bg="navBarBg" />
				</view>
				<view class="section_1"  v-for="(item,index) in 4" :key="index">
					<view class="single-avatar_1">
						<image style="border-radius: 50%;
		width: 100rpx;
		height: 100rpx;"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg"
							mode=""></image>
					</view>
					<view class="group_5">
						<view class="text-wrapper_1">
							<text lines="1" class="text_2">悠然苑</text>
							<text lines="1" class="text_3">篮球半场20次卡</text>
							<text lines="1" class="text_4">-1</text>
						</view>
						<view class="tag_1">
							<text lines="1" decode="true" class="text_5">上次进场:2022/12/12&nbsp;15:50:00</text>
						</view>
					</view>
					<view class="tag_2">
						<text lines="1" class="text_6">12:30进场</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	import navbar from '@/mixins/navbar.js';

	export default {
		mixins: [navbar({
			navBarColor: '#000000'
		})],
		data() {
			return {
				navBarHeight: 0,
				das: ''
			}
		},
		created() {
			const {
				navBarHeight
			} = getApp().globalData;
			this.navBarHeight = navBarHeight;

		},
		onLoad() {
			this.das = '当前在场'
		},

		methods: {

		},
	}
</script>

<style>
	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.box_1 {
		background-color: rgba(255, 255, 255, 1.0);
		width: 750rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.image_1 {
		width: 654rpx;
		height: 22rpx;
		margin: 33rpx 0 0 48rpx;
	}

	.block_1 {
		width: 750rpx;
		height: 100%;
		margin-bottom: 1rpx;
		display: flex;
		flex-direction: column;
	}

	.nav-bar_1 {
		width: 750rpx;
		height: 100rpx;
		margin-top: 63rpx;
		flex-direction: row;
		display: flex;
	}

	.group_1 {
		height: 37rpx;
		display: flex;
		flex-direction: column;
		width: 183rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.box_2 {
		width: 183rpx;
		height: 37rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.icon_1 {
		width: 20rpx;
		height: 37rpx;
	}

	.text_1 {
		width: 141rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin-top: 1rpx;
	}

	.group_2 {
		height: 55rpx;
		display: flex;
		flex-direction: column;
		width: 150rpx;
		margin: 21rpx 21rpx 0 366rpx;
	}

	.group_3 {
		position: relative;
		width: 150rpx;
		height: 55rpx;
		display: flex;
		flex-direction: row;
	}

	.group_4 {
		border-radius: NaNrpx;
		width: 36rpx;
		height: 14rpx;
		border: 4px solid rgba(0, 0, 0, 1);
		display: flex;
		flex-direction: column;
		margin: 38rpx 0 0 82rpx;
	}

	.applet-top-bar_1 {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 150rpx;
		height: 55rpx;
	}

	.section_1 {
		width: 690rpx;
		height: 130rpx;
		flex-direction: row;
		display: flex;
		margin: 23rpx 0 0 30rpx;
		border-bottom: 2rpx rgba(229, 229, 229, 1.0) solid;
	}

	.single-avatar_1 {
		background-color: rgba(51, 51, 51, 1.0);
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
	}

	.group_5 {
		width: 382rpx;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 9rpx 0 0 26rpx;
	}

	.text-wrapper_1 {
		width: 348rpx;
		height: 35rpx;
		flex-direction: row;
		display: flex;
	}

	.text_2 {
		width: 88rpx;
		height: 35rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_3 {
		width: 171rpx;
		height: 35rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 0rpx 0 0 59rpx;
	}

	.text_4 {
		width: 20rpx;
		height: 35rpx;
		overflow-wrap: break-word;
		color: rgba(99, 93, 247, 1);
		font-size: 24rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 18rpx;
		margin: 6rpx 0 0 10rpx;
	}

	.tag_1 {
		background-color: rgba(243, 243, 243, 1.0);
		border-radius: 6rpx;
		height: 40rpx;
		margin-top: 19rpx;
		display: flex;
		flex-direction: column;
		width: 382rpx;
	}

	.text_5 {
		width: 347rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 8rpx 0 0 16rpx;
	}

	.tag_2 {
		background-color: rgba(255, 65, 5, 0.10);
		border-radius: 6rpx;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		width: 153rpx;
		margin: 3rpx 0 0 29rpx;
	}

	.text_6 {
		width: 118rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(255, 98, 0, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 8rpx 0 0 18rpx;
	}

	.section_2 {
		background-color: rgba(229, 229, 229, 1.0);
		width: 690rpx;
		height: 1rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx 0 0 30rpx;
	}

	.section_3 {
		width: 690rpx;
		height: 100rpx;
		flex-direction: row;
		display: flex;
		margin: 30rpx 0 0 30rpx;
	}

	.single-avatar_2 {
		background-color: rgba(51, 51, 51, 1.0);
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
	}

	.section_4 {
		width: 382rpx;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 9rpx 0 0 26rpx;
	}

	.text-wrapper_2 {
		width: 348rpx;
		height: 29rpx;
		flex-direction: row;
		display: flex;
	}

	.text_7 {
		width: 88rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_8 {
		width: 171rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 46rpx;
		margin: 3rpx 0 0 59rpx;
	}

	.text_9 {
		width: 20rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: rgba(99, 93, 247, 1);
		font-size: 24rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 6rpx 0 0 10rpx;
	}

	.tag_3 {
		background-color: rgba(243, 243, 243, 1.0);
		border-radius: 6rpx;
		height: 40rpx;
		margin-top: 19rpx;
		display: flex;
		flex-direction: column;
		width: 382rpx;
	}

	.text_10 {
		width: 347rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 8rpx 0 0 16rpx;
	}

	.tag_4 {
		background-color: rgba(255, 65, 5, 0.10);
		border-radius: 6rpx;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		width: 153rpx;
		margin: 3rpx 0 0 29rpx;
	}

	.text_11 {
		width: 118rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(255, 98, 0, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 8rpx 0 0 18rpx;
	}

	.section_5 {
		background-color: rgba(229, 229, 229, 1.0);
		width: 690rpx;
		height: 1rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx 0 0 30rpx;
	}

	.section_6 {
		width: 690rpx;
		height: 100rpx;
		flex-direction: row;
		display: flex;
		margin: 30rpx 0 0 30rpx;
	}

	.single-avatar_3 {
		background-color: rgba(51, 51, 51, 1.0);
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
	}

	.group_6 {
		width: 382rpx;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 9rpx 0 0 26rpx;
	}

	.text-wrapper_3 {
		width: 348rpx;
		height: 29rpx;
		flex-direction: row;
		display: flex;
	}

	.text_12 {
		width: 88rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_13 {
		width: 171rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 46rpx;
		margin: 3rpx 0 0 59rpx;
	}

	.text_14 {
		width: 20rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: rgba(99, 93, 247, 1);
		font-size: 24rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 6rpx 0 0 10rpx;
	}

	.tag_5 {
		background-color: rgba(243, 243, 243, 1.0);
		border-radius: 6rpx;
		height: 40rpx;
		margin-top: 19rpx;
		display: flex;
		flex-direction: column;
		width: 382rpx;
	}

	.text_15 {
		width: 347rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 8rpx 0 0 16rpx;
	}

	.tag_6 {
		background-color: rgba(255, 65, 5, 0.10);
		border-radius: 6rpx;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		width: 153rpx;
		margin: 3rpx 0 0 29rpx;
	}

	.text_16 {
		width: 118rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(255, 98, 0, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 8rpx 0 0 18rpx;
	}

	.section_7 {
		background-color: rgba(229, 229, 229, 1.0);
		width: 690rpx;
		height: 1rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx 0 0 30rpx;
	}

	.section_8 {
		width: 690rpx;
		height: 100rpx;
		flex-direction: row;
		display: flex;
		margin: 30rpx 0 0 30rpx;
	}

	.single-avatar_4 {
		background-color: rgba(51, 51, 51, 1.0);
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
	}

	.group_7 {
		width: 382rpx;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 9rpx 0 0 26rpx;
	}

	.text-wrapper_4 {
		width: 348rpx;
		height: 29rpx;
		flex-direction: row;
		display: flex;
	}

	.text_17 {
		width: 88rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_18 {
		width: 171rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 46rpx;
		margin: 3rpx 0 0 59rpx;
	}

	.text_19 {
		width: 20rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: rgba(99, 93, 247, 1);
		font-size: 24rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 6rpx 0 0 10rpx;
	}

	.tag_7 {
		background-color: rgba(243, 243, 243, 1.0);
		border-radius: 6rpx;
		height: 40rpx;
		margin-top: 19rpx;
		display: flex;
		flex-direction: column;
		width: 382rpx;
	}

	.text_20 {
		width: 347rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 8rpx 0 0 16rpx;
	}

	.tag_8 {
		background-color: rgba(255, 65, 5, 0.10);
		border-radius: 6rpx;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		width: 153rpx;
		margin: 3rpx 0 0 29rpx;
	}

	.text_21 {
		width: 118rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(255, 98, 0, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 8rpx 0 0 18rpx;
	}

	.section_9 {
		background-color: rgba(229, 229, 229, 1.0);
		width: 690rpx;
		height: 1rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx 0 0 30rpx;
	}

	.section_10 {
		width: 690rpx;
		height: 100rpx;
		flex-direction: row;
		display: flex;
		margin: 30rpx 0 0 30rpx;
	}

	.single-avatar_5 {
		background-color: rgba(51, 51, 51, 1.0);
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
	}

	.box_3 {
		width: 382rpx;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 9rpx 0 0 26rpx;
	}

	.text-wrapper_5 {
		width: 348rpx;
		height: 29rpx;
		flex-direction: row;
		display: flex;
	}

	.text_22 {
		width: 88rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_23 {
		width: 171rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 46rpx;
		margin: 3rpx 0 0 59rpx;
	}

	.text_24 {
		width: 20rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: rgba(99, 93, 247, 1);
		font-size: 24rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 6rpx 0 0 10rpx;
	}

	.tag_9 {
		background-color: rgba(243, 243, 243, 1.0);
		border-radius: 6rpx;
		height: 40rpx;
		margin-top: 19rpx;
		display: flex;
		flex-direction: column;
		width: 382rpx;
	}

	.text_25 {
		width: 347rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 8rpx 0 0 16rpx;
	}

	.tag_10 {
		background-color: rgba(255, 65, 5, 0.1);
		border-radius: 6rpx;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		width: 153rpx;
		margin: 3rpx 0 0 29rpx;
	}

	.text_26 {
		width: 118rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(255, 98, 0, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 8rpx 0 0 18rpx;
	}

	.section_11 {
		background-color: rgba(229, 229, 229, 1.0);
		width: 690rpx;
		height: 1rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx 0 0 30rpx;
	}

	.section_12 {
		width: 690rpx;
		height: 100rpx;
		flex-direction: row;
		display: flex;
		margin: 30rpx 0 525rpx 30rpx;
	}

	.single-avatar_6 {
		background-color: rgba(51, 51, 51, 1.0);
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
	}

	.group_8 {
		width: 382rpx;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 9rpx 0 0 26rpx;
	}

	.text-wrapper_6 {
		width: 348rpx;
		height: 29rpx;
		flex-direction: row;
		display: flex;
	}

	.text_27 {
		width: 88rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_28 {
		width: 171rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 46rpx;
		margin: 3rpx 0 0 59rpx;
	}

	.text_29 {
		width: 20rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: rgba(99, 93, 247, 1);
		font-size: 24rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 6rpx 0 0 10rpx;
	}

	.tag_11 {
		background-color: rgba(243, 243, 243, 1.0);
		border-radius: 6rpx;
		height: 40rpx;
		margin-top: 19rpx;
		display: flex;
		flex-direction: column;
		width: 382rpx;
	}

	.text_30 {
		width: 347rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 8rpx 0 0 16rpx;
	}

	.tag_12 {
		background-color: rgba(255, 65, 5, 0.10);
		border-radius: 6rpx;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		width: 153rpx;
		margin: 3rpx 0 0 29rpx;
	}

	.text_31 {
		width: 118rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(255, 98, 0, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 8rpx 0 0 18rpx;
	}
</style>